<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <title>Title</title>
</head>
<body>
<form class="layui-form" action="" id="saveForm" style="margin-right: 40px;margin-top: 20px">

    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="number" name="phone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">业务类型</label>
        <div class="layui-input-inline">
            <select id="topType" name="businesstype">
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<script>
    //自定义layui组件的目录
    layui.config({
        base: '/layui/lay/modules/'
    }).extend({
        //设定组件别名
        tableSelect: 'tableSelect',
    });
    layui.use(['layer', 'jquery', 'form'], function () {
        let layer = layui.layer;
        let $ = layui.jquery;
        let form = layui.form;
        let options = '';
        let $topType = $("#topType");
        form.on('submit(saveFilter)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //提交表单数据
            $.ajax({
                url: "/custom/addPotentialCustomer",
                type: "POST",
                dataType: "JSON",
                data: data.field,
                success: function (ret) {
                    if (ret.code == 0) {
                        layer.msg(ret.msg, {icon: 6});
                    } else {
                        layer.msg(ret.msg, {icon: 5});
                    }

                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        $.ajax({
            url: "/business/findAllDictionary",
            type: "GET",
            dataType: "JSON",
            success: function (allDictionary) {
                //将数据放到select中
                for (let i = 0; i < allDictionary.length; i++) {
                    if (allDictionary[i].type_id == 2) {
                        options += '<option value="' + allDictionary[i].dictionary_name + '">' + allDictionary[i].dictionary_name + '</option>';
                    }
                }

                $topType.html(options)
                form.render()
            }
        })

    })
</script>
</body>
</html>